<template>
  <draggable class="list-group" :group="{ name: 'cc', pull: 'clone', put: false }">
    <draggable class="list-group-i" @update="dragUpdate" @clone="dragClone" @end="dragEnd" @start="dragStart" v-model="dlist"  @change="listChange" group="aa" draggable=".item">
        <slot class="item" name="item" v-bind="dlist"></slot>
    </draggable>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
import componentProperties from "@/utils/componentProperties"; 
export default {
  name: 'SingleContainer',
  components: {
    draggable
  },
  data () {
    return {
      dlist: []
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    list: {
      handler (val) {
        console.log('list------------', this.list);
        if (val.length > 0) {
          // this.disabled = true;
          this.dlist = val;
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.dlist = this.list;
  },
  methods: {
    dragUpdate () {
      console.log('list----------', this.list);
    },
    dragEnd () {
      console.log('dragEnd--------------');
    },
    dragStart () {
      console.log('dragStart--------------');
      this.$forceUpdate();
    },
    dragClone () {
      console.log('dragClone--------------');
    },
    listChange (val) {
      console.log('change----------', val);
      this.dlist.forEach(res => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re.active === true) {
            re.active = false;
          }
        })
      });
      if (val.added) {
        // val.added.element.active = true;
        // this.$forceUpdate();
        const comp = val.added.element;
        comp.setStyle = JSON.parse(JSON.stringify(componentProperties.get(comp.name).setStyle));
        this.$emit('activeCom', val.added.element);
      }
      this.$emit('update:list', this.dlist);
    },
    recursiveTraverse (node, action) {
      action(node);
      if (!node || !node.list || node.list.length === 0) {
        return;
      }
      node.list.forEach((item) => {
        this.recursiveTraverse(item, action);
      });
    }
  }
}
</script>

<style scoped lang="scss">
.iii {
  height: 100%;
}
.list-group-i {
  height: 100%;
}
.list-group {
  overflow: hidden;
}
</style>